<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6"><el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button></el-col>
      </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="name" label="名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="regionName" label="时段" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
            {{formatTimeHM(row.startTime)}} - {{formatTimeHM(row.endTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="timeHour" label="时长" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
             {{row.timeHour ? parseSeconds(row.timeHour) : '0分'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{ row }">
          <el-button @click.stop="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click.stop="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Edit :show.sync="showEdit" :item="currentItem" @confirm="getList"></Edit>
  </div>
</template>
<script>
import {getList, remove} from '@/api/timeSegment'
import Edit from './components/edit.vue'
import {parseSeconds} from '@/utils'
export default {
    components: {Edit},
    data() {
        return {
            list: [],
            total: 0,
            req: {page: 1,pageSize: 20},
            showEdit: false,
            currentItem: {}
        }
    },
    mounted(){
        this.getList()
    },
    methods: {
        parseSeconds,
        async getList() {
            try {
                const res = await getList(this.req);
                this.list = res.data;
                this.total = res.total;
            } catch (e) {
                
            }
        },
        add() {
            this.currentItem = {}
            this.showEdit = true;
        },
        edit(row) {
            this.currentItem = structuredClone(row);
            this.showEdit = true;
        },
        del(row) {
            this.$modal.confirm('确定删除此条数据吗？').then((res) => {
                // 请求服务器删除数据
                remove({ id: row.id }).then((res) => {
                // 刷新数据
                this.getList();
                });
            });
        },
        formatTimeHM(timeString) {
            const [hours, minutes, seconds] = timeString.split(":");

            // 创建一个日期对象，将时分秒设置为对应的值
            const date = new Date();
            date.setHours(hours);
            date.setMinutes(minutes);

            // 使用toLocaleTimeString方法将时间格式化为时分的字符串
            const formattedTime = date.toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit",
            });

            return formattedTime;
        },

    }
}
</script>